<div class="dialog-content-wrapper">
  <mat-toolbar>
    <mat-toolbar-row fxFlex fxLayout="row" fxLayoutAlign="space-between center">
      <span class="title dialog-title">
        Settings
      </span>
      <button mat-icon-button (click)="close()" >
        <mat-icon>close</mat-icon>
      </button>
    </mat-toolbar-row>
  </mat-toolbar>

  <div mat-dialog-content fxLayout="column" fxLayoutGap="12px">
    <mat-form-field appearance="fill">
      <mat-label>Save tracks to directory</mat-label>
      <input matInput readonly [(ngModel)]="model.BaseSaveDir" required>
      <button mat-icon-button matSuffix (click)="changeBaseSaveDir()">
        <mat-icon>edit</mat-icon>
      </button>
      <mat-hint>Directory where all tracks will be saved</mat-hint>
    </mat-form-field>
    <mat-form-field appearance="fill">
      <mat-label>Max simultaneous downloads</mat-label>
      <input matInput type="number" min="0" max="10" [(ngModel)]="model.MaxParrallelDownloads">
      <mat-hint>Max number of tracks that will be downloaded simultaneously</mat-hint>
    </mat-form-field>
    <mat-slide-toggle [(ngModel)]="model.ClipboardWatch">
      Clipboard watch
    </mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="model.DownloadOnCopy" [disabled]="!model.ClipboardWatch">
      Download on copy
    </mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="model.ConcurrentDownloads">
      Concurrent downloads
    </mat-slide-toggle>
    <mat-slide-toggle [(ngModel)]="model.ConcurrentPlaylistDownloads">
      Concurrent playlist downloads
    </mat-slide-toggle>
    <div class="toggle-wrapper" fxLayout="column" fxLayoutGap="5px">
      <mat-slide-toggle [(ngModel)]="model.ConvertToMp3" [disabled]="!isFfmpegAvailable">
        Convert to mp3 in background
      </mat-slide-toggle>
      <div class="warning" *ngIf="!isFfmpegAvailable">
        You have to install ffmpeg tool on your system to enable this option
      </div>
    </div>
    <div class="toggle-wrapper" fxLayout="column" fxLayoutGap="5px">
      <mat-slide-toggle [(ngModel)]="model.CleanWebmFiles" [disabled]="!isFfmpegAvailable || !model.ConvertToMp3">
        Remove webm files after converting to mp3 (disk space saving)
      </mat-slide-toggle>
      <div class="warning" *ngIf="!model.ConvertToMp3">
        You have to enable "Convert to mp3" option before
      </div>
    </div>
    <div class="toggle-wrapper" fxLayout="column" fxLayoutGap="5px">
      <mat-slide-toggle [(ngModel)]="model.Telegram.Share" [disabled]="!isFfmpegAvailable || !model.ConvertToMp3">
        Share downloaded tracks with your devices through telegram
      </mat-slide-toggle>
      <div class="warning" *ngIf="!model.ConvertToMp3">
        You have to enable "Convert to mp3" option before
      </div>
      <mat-form-field appearance="fill" *ngIf="model.Telegram.Share">
        <mat-label>Insert your telegram username</mat-label>
        <input matInput [(ngModel)]="model.Telegram.Username" required>
        <mat-icon matPrefix>alternate_email</mat-icon>
        <mat-hint>You have to set username into telegram's settings</mat-hint>
        <mat-error>Cannot be empty if enabled</mat-error>
      </mat-form-field>
    </div>
  </div>
  <div mat-dialog-actions>
    <button mat-flat-button color="primary" (click)="save()">Save</button>
  </div>
</div>
